<template>
  <div id="sider">
    <div class="sider-bar clearfix">
      <a href="javascript:;" id="stu"> 学生实训考勤管理系统</a>
      <div class="img-font"> 
      <router-link
        @click="sider(index)"
        v-for="(item, index) in items"
        :class="{ active: index === curId }"
        :to="item.url"
      >
        <img :src="imgss" alt /> {{ item.name }}</router-link
      ></div>
    </div>
    <div class="header"></div>
    <!-- 顶部 -->
    <!-- 页面提示 -->
    <div class="sider-con">
      <div>
        <div
          v-show="index === curId"
          v-for="(content, index) in contents"
          class="tips"
        >
          {{ content.content }}
        </div>
      </div>
    </div>

    <!-- 页面内容 -->

    <div class="content">
      <!-- <admin></admin> -->
      <!-- 引入子组件 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgss: require("@/assets/icons/svg/个人信息.svg"),
      curId: 0,
      flag: true,
      items: [
        { name: "个人信息管理", url: "/admin" },
        { name: "项目课程表", url: "/curriculum" },
        { name: "作业管理", url: "/jobManagement" },
        { name: "考勤管理", url: "" },
        { name: "请假记录", url: "/admin" },
        { name: "设置", url: "/admin" },
      ],
      contents: [
        { content: "个人信息管理" },
        { content: "项目课程表" },
        { content: "作业管理" },
        { content: "考勤管理" },
        { content: "请假记录" },
        { content: "设置" },
      ],
    };
  },

  methods: {
    sider(index) {
      this.curId = index;
    },
  },
};
</script>
<style scoped >
@import "@/css/reset";

#sider {
  margin: auto 0;
  display: flex;
  position: relative;
  width: 100%;
  height: 100vh;
}

#stu {
  text-indent: 5px;
  font-weight: bolder;
  letter-spacing: 5px;
}

.sider-bar {
  width: 220px;
  background-color: rgb(0, 27, 74);
  height: 100%;
}

.sider-bar a {
  float: left;
  width: 220px;
  line-height: 50px;
  text-align: start;
  text-indent: 50px;
  /* 距离左边的间距 */
  text-decoration: none;
  color: white;
  font-size: 1rem;
}
.img-font img {
  position: absolute;
  transform: scale(0.1);
  z-index: 99;
  left: -70px;
  top: -20px;
}
.img-font .active {
  background: rgb(133, 149, 173);
  opacity: 0.9;
  color: black;
  border: 5px solid rgb(146, 181, 228);
  border-radius: 10px;
  line-height: 50px;
  text-align: start;
  text-indent: 45px;
}

.tips {
  height: 29px;
  background: rgb(152, 78, 243);
  left: 270px;
  position: absolute;
  top: 80px;
  right: 0;
  color: white;
  font: 900;
}

.header {
  height: 29px;
  background: rgb(186, 156, 156);
  left: 270px;
  position: absolute;
  top: 0;
  right: 0;
  /* width: 83vw; */
}
.content {
  position: absolute;
  left: 270px;
  top: 160px;
  right: 0;
  bottom: 0;
  background-color: rgb(218, 235, 235);
}
</style>

